<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
    <!--  <crudOperation :permission="permission" /> -->
      <!--表单组件-->
      <el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0"
        :title="crud.status.title" width="800px">
        <el-form ref="form" :model="form" :rules="rules" size="small" label-width="120px">
         <!-- <el-form-item label="配置id">
            <el-input v-model="form.id" style="width: 500px;" />
          </el-form-item> -->

          <el-form-item label="公司名称">
            <el-input v-model="form.companyName" style="width: 500px;" />
          </el-form-item>
          <el-form-item label="公司地址">
            <el-input v-model="form.companyAddr" style="width: 500px;" />
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input v-model="form.eMail" style="width: 500px;" />
          </el-form-item>
          <el-form-item label="qq">
            <el-input v-model="form.qq" style="width: 500px;" />
          </el-form-item>

          <el-form-item label="联系电话">
            <el-input v-model="form.contacts" style="width: 500px;" />
          </el-form-item>
          <el-form-item label="备案号">
            <el-input v-model="form.consult" style="width: 500px;" />
          </el-form-item>

          <el-form-item label="企业定位">
            <el-input v-model="form.location" style="width: 500px;" />
          </el-form-item>
          <el-form-item label="企业理念">
            <el-input v-model="form.idea" style="width: 500px;" />
          </el-form-item>
          <el-form-item label="企业使命">
            <el-input v-model="form.mission" style="width: 500px;" />
          </el-form-item>
          <el-form-item label="企业愿景">
            <el-input v-model="form.vision" style="width: 500px;" />
          </el-form-item>

          <el-form-item label="总裁寄语">
            <el-input v-model="form.consult2" type="textarea" :rows="3" style="width: 500px;" />
          </el-form-item>

          <el-form-item label="公司logo">
            <!-- <el-input v-model="form.logo" style="width: 500px;" /> -->
            <MaterialList v-model="logo" type="image" :num="1" :width="150" :height="150" />
          </el-form-item>
          <el-form-item label="微信二维码">
            <!-- <el-input v-model="form.wechat" style="width: 500px;" /> -->
            <MaterialList v-model="wechat" type="image" :num="1" :width="150" :height="150" />
          </el-form-item>
          <el-form-item label="微信公众号">
            <!-- <el-input v-model="form.wechatAccount" style="width: 500px;" /> -->
            <MaterialList v-model="wechatAccount" type="image" :num="1" :width="150" :height="150" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="text" @click="crud.cancelCU">取消</el-button>
          <el-button :loading="crud.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
        </div>
      </el-dialog>
      <!--表格渲染-->
      <el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%;"
        @selection-change="crud.selectionChangeHandler">
        <el-table-column type="selection" width="55" />
        <!-- <el-table-column v-if="columns.visible('id')" prop="id" label="配置id" />
        <el-table-column v-if="columns.visible('logo')" prop="logo" label="公司logo" /> -->
        <el-table-column v-if="columns.visible('companyName')" prop="companyName" label="公司名称" />
        <el-table-column v-if="columns.visible('companyAddr')" prop="companyAddr" label="公司地址" />
        <!--   <el-table-column v-if="columns.visible('eMail')" prop="eMail" label="邮箱" /> -->
        <el-table-column v-if="columns.visible('qq')" prop="qq" label="qq" />
        <!--   <el-table-column v-if="columns.visible('wechat')" prop="wechat" label="微信二维码" /> -->
        <!--    <el-table-column v-if="columns.visible('wechatAccount')" prop="wechatAccount" label="微信公众号" /> -->
        <el-table-column v-if="columns.visible('contacts')" prop="contacts" label="联系电话" />
        <el-table-column v-if="columns.visible('consult')" prop="consult" label="备案号" />
        <!-- <el-table-column v-if="columns.visible('consult2')" prop="consult2" label="咨询电话2" /> -->
        <el-table-column v-if="columns.visible('location')" prop="location" label="企业定位" />
        <el-table-column v-if="columns.visible('idea')" prop="idea" label="企业理念" />
        <el-table-column v-if="columns.visible('mission')" prop="mission" label="企业使命" />
        <el-table-column v-if="columns.visible('vision')" prop="vision" label="企业愿景" />
        <el-table-column v-permission="['admin','yxWebsiteConfig:edit']" label="操作" width="150px"
          align="center">
          <template slot-scope="scope">
            <udOperation :data="scope.row" :permission="permission" />
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination />
    </div>
  </div>
</template>

<script>
  import crudYxWebsiteConfig from '@/api/website/yxWebsiteConfig'
  import CRUD, {
    presenter,
    header,
    form,
    crud
  } from '@crud/crud'
  import rrOperation from '@crud/RR.operation'
  import crudOperation from '@crud/CRUD.operation'
  import udOperation from '@crud/UD.operation2'
  import pagination from '@crud/Pagination'
  import picUpload from '@/components/pic-upload'
  import MaterialList from "@/components/material";


  // crud交由presenter持有
  const defaultCrud = CRUD({
    title: '官网配置',
    url: 'api/yxWebsiteConfig',
    sort: 'id,desc',
    crudMethod: {
      ...crudYxWebsiteConfig
    }
  })
  const defaultForm = {
    id: null,
    logo: null,
    companyName: null,
    companyAddr: null,
    eMail: null,
    qq: null,
    wechat: null,
    wechatAccount: null,
    contacts: null,
    consult: null,
    consult2: null,
    location: null,
    idea: null,
    mission: null,
    vision: null
  }
  export default {
    name: 'YxWebsiteConfig',
    components: {
      pagination,
      crudOperation,
      rrOperation,
      udOperation,
      MaterialList,
      picUpload,
    },
    mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
    data() {
      return {
        logo: [],
        wechat: [],
        wechatAccount: [],
        permission: {
          add: ['admin', 'yxWebsiteConfig:add'],
          edit: ['admin', 'yxWebsiteConfig:edit'],

        },
        rules: {}
      }
    },
    watch: {
      logo: function(val) {
        this.form.logo = val.join(',')
      },
      wechat:function(val) {
        this.form.wechat = val.join(',')
      },
      wechatAccount:function(val) {
        this.form.wechatAccount = val.join(',')
      },
    },
    methods: {
      // 获取数据前设置好接口地址
      [CRUD.HOOK.beforeRefresh]() {
        return true
      }, // 新增与编辑前做的操作
      [CRUD.HOOK.afterToCU](crud, form) {
        this.logo = []
        this.wechat = []
        this.wechatAccount = []
        if (form.logo && form.id) {
          this.logo = form.logo.split(',')
        }
        if (form.wechat && form.id) {
          this.wechat = form.wechat.split(',')
        }
        if (form.wechatAccount && form.id) {
          this.wechatAccount = form.wechatAccount.split(',')
        }
      },
    }
  }
</script>

<style scoped>
  .table-img {
    display: inline-block;
    text-align: center;
    background: #ccc;
    color: #fff;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    vertical-align: middle;
    width: 32px;
    height: 32px;
    line-height: 32px;
  }
</style>
